<template>
  <div class="dateTime" :style="styleColor">
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :clearable="false"
      value-format="yyyy-MM-dd hh:mm:ss"
      @change="dateTimeChange"
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'widgetDateTime',
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      value1: [new Date(), new Date()],
      timestr: '',
      options: {}
    }
  },
  computed: {
    transStyle() {
      return this.objToOne(this.options)
    },
    styleColor() {
      return {
        position: this.ispreview ? 'absolute' : 'static',
        color: this.transStyle.color || '#fff',
        text: this.transStyle.text || '文本框',
        startTime: this.transStyle.startTime || '2021-01-01 01:01:01',
        endTime: this.transStyle.endTime || '2021-05-01 01:01:01',
        'font-size': this.transStyle.fontSize + 'px' || '30px',
        'letter-spacing': this.transStyle.letterSpacing + 'em',
        background: this.transStyle.background,
        'font-weight': this.transStyle.fontWeight,
        'text-align': this.transStyle.textAlign,
        display: this.transStyle.hideLayer == undefined ? 'block' : this.transStyle.hideLayer ? 'none' : 'block',
        width: this.transStyle.width + 'px',
        height: this.transStyle.height + 'px',
        left: this.transStyle.left + 'px',
        top: this.transStyle.top + 'px',
        right: this.transStyle.right + 'px'
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.options = val
      },
      deep: true
    }
  },
  mounted() {
    this.options = this.value
  },
  methods: {
    dateTimeChange(val) {
      this.$store.commit('reportStartTime', val[0])
      this.$store.commit('reportEndTime', val[1])
    }
  }
}
</script>
<style lang="scss" scoped>
.dateTime {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
